<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('修改文章')" />
	<th:block th:include="include :: select2-css" />
	<th:block th:include="include :: bootstrap-select-css" />
	<style>
		.article-form-horizontal{
			text-align: center;
		}
		.article-group{
			display: inline-block;
		}
		.article-group label{
			white-space: nowrap;
		}
		.article-img{
			text-align: center;
		}
		.w-e-text-container {
			height: 600px !important; /*!important是重点，因为原div是行内样式设置的高度300px*/
		}
		#title{
			max-width: 1000px;
		}
		#tag{
			min-width: 300px;
		}
	</style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-article-edit" th:object="${article}">
            <input id="articleId" name="articleId" th:field="*{articleId}"  type="hidden">
			<div class="form-group">	
				<label class="col-sm-3 control-label">文章标题：</label>
				<div class="col-sm-8">
					<input id="title" name="title" th:field="*{title}" class="form-control" type="text">
				</div>
			</div>
			<div class="article-form-horizontal">
				<div class="form-group article-group">
					<label class="col-sm-3 control-label">来源：</label>
					<div class="col-sm-8">
						<input id="source" name="source" th:field="*{source}" class="form-control" type="text">
					</div>
				</div>
				<div class="form-group article-group">
					<label class="col-sm-3 control-label">推荐排名：</label>
					<div class="col-sm-8">
						<input id="ranking" name="ranking" th:field="*{ranking}" class="form-control" type="text">
					</div>
				</div>
				<div class="form-group article-group">
					<label class="col-sm-3 control-label">状态：</label>
					<div class="col-sm-8">
						<select id="state" name="state" th:field="*{state}" class="form-control">
							<option value="0">编辑</option>
							<option value="1">发布</option>
							<option value="2">撤回</option>
						</select>
					</div>
				</div>
				<div class="form-group article-group">
					<label class="col-sm-3 control-label">标签：</label>
					<div class="col-sm-8">
						<select id="tag" class="form-control select2-multiple" multiple>
							<!--<option th:each="tag : ${tags}" th:value="${tag.tagId}" th:text="${tag.tagName}"></option>-->
							<div th:each="tag, index : ${tags}" th:switch="${tag.tagId}">
								<option th:each="t : ${article.tags}" th:case="${t.tagId}"  th:value="${tag.tagId}" th:text="${tag.tagName}" selected></option>
								<option th:case="*" th:value="${tag.tagId}" th:text="${tag.tagName}"></option>
							</div>
						</select>
					</div>
				</div>
			</div>
			<div class="form-group article-img">
				<img id="article_img" th:attr="src=${article.image}" height="400" width="700"/><br>
				<a href="javascript:img()" class="upload-img"> <label>上传图像</label> </a>
			</div>
			<div id="editor" th:utext="${article.content}" style="width: 1100px;height: 600px;margin: auto">
				<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
			</div>
		</form>
    </div>
    <div th:include="include::footer"></div>
	<th:block th:include="include :: select2-js" />
	<th:block th:include="include :: bootstrap-select-js" />
	<script type="text/javascript" src="https:////unpkg.com/wangeditor/release/wangEditor.min.js"></script>
    <script type="text/javascript">
		var prefix = ctx + "content/article";
        var editor;
        var articleId;

        function img() {
            var url =prefix + "/img/" + $("#articleId").val();
            $.modal.open("文章头图", url, 1000, 660);
        }
		$("#form-article-edit").validate({
			rules:{
				xxxx:{
					required:true,
				},
			},
			focusCleanup: true
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
	            var formDate = $('#form-article-edit').serializeArray();
	            formDate.push({name: "content", value: editor.txt.html()});
	            var subContent = editor.txt.text();
	            subContent = subContent.substring(0, 200);
	            formDate.push({name: "subContent", value: subContent});
	            var temp = $("#tag").select2('val');
	            formDate.push({name: "list", value: temp});
	            console.log(formDate);
                $.operate.save(prefix + "/edit", formDate);
	            //$.operate.save(prefix + "/edit", $('#form-article-edit').serialize());
	        }
	    }

	    $(window).load(function () {
			var imgSrc = $.common.isEmpty($("#article_img").attr("src")) ? "\/img/upImg.png" : $("#article_img").attr("src");
            $("#article_img").attr("src", imgSrc);

            var E = window.wangEditor;
            editor = new E( document.getElementById('editor') );
            editor.customConfig.height = "1100px";
            // 隐藏“网络图片”tab
            editor.customConfig.showLinkImg = false;
            // editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
            // 配置服务器端地址
            editor.customConfig.uploadImgServer = prefix + "/aImg/" + $("#articleId").val();
            editor.customConfig.uploadFileName = 'articleImg';
            editor.create();
        })
	</script>
</body>
</html>
